<template>
    <div class="approval-page">
        <div class="approval-sidebar">
            <div class="sidebar-title">选择默认的审批人</div>
            <ul class="approver-list">
                <li v-for="approver in defaultApprovers" :key="approver.userId"
                    :class="{ selected: selectedApprover === approver.userId }" @click="selectApprover(approver.userId)">
                    <span>{{ approver.userName }}</span>
                </li>
            </ul>
        </div>
        <div class="approval-main">
            <div class="main-header">
                <h2 class="main-title">审批表单</h2>
            </div>
            <el-table :data="forms" border class="form-table" style="width: 100%">
                <el-table-column label="审批信息">
                    <template #default="scope">
                        <div class="form-info">
                            <!-- <el-avatar :style="{ background: scope.row.color }" :icon="scope.row.icon" size="large" /> -->
                            <div class="form-info-text">
                                <div class="form-name">{{ scope.row.approvalTypeName }}</div>
                                <div class="form-desc">{{ scope.row.aprovalDescription }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="260" align="center">
                    <template #default="scope">
                        <el-link class="ml-2" @click="openMoveDialog(scope.row)">移动至</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 移动至弹窗 -->
        <el-dialog v-model="moveDialogVisible" title="移动至" width="400px" :close-on-click-modal="false">
            <el-radio-group v-model="moveTarget" class="move-radio-group" @change="handleRadioChange">
                <el-radio v-for="group in groups" :key="group" :label="group" border >{{ group.userName }}</el-radio>
                <el-radio label="其它" border>其它</el-radio>
            </el-radio-group>
            <template #footer>
                <el-button @click="moveDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmMove">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { Plus, UserFilled, Avatar, Money, Document, Coin } from '@element-plus/icons-vue'
import { getApprovers,changeDefaultApprover,getApprovalCategoriesByDefaultApproverId } from '@/api/approval/approvalForm/approvalForm'

const groups = ref(['人事', '考勤', '行政', '财务'])
const activeGroup = ref('人事')
// 定义分类数据
const defaultApprovers = ref([
    { userId: 1, userName: 'admin',nickName:'若依' },
    { id: 2, type: '考勤' },
    { id: 3, type: '行政' },
    { id: 4, type: '财务' },
]);

onMounted(() => {
    getApprovers().then(response => {
        defaultApprovers.value = response.rows;
        groups.value = response.rows;
        // console.log(defaultApprovers.value);
    }); 
})

// 选中项的 ID
const selectedApprover = ref(1); // 默认选中第一个
const approvalType = ref();

const handleRadioChange = (value) => {
    console.log(value.userId); // 输出选中的值
    nextApproverId.value = value.userId;
};
// 点击分类项时更新选中状态
const selectApprover = (id) => {
    selectedApprover.value = id;
    console.log(selectedApprover.value)
    getApprovalCategoriesByDefaultApproverId({defaultApproverId:id,}).then(response => {
        console.log(response.rows) 
        forms.value = response.rows;
    })
};
const forms = ref([
    {
        approvalTypeName: '离职',
        aprovalDescription: '用于人事部门员工入职申请',
        approvalTypeId:2,
        defaultAproverId:1
    },
])

const moveDialogVisible = ref(false)
const moveTarget = ref('')
const moveForm = ref(null)

function handleGroupSelect(group) {
    activeGroup.value = group
}
const approvalTypeId = ref(null); // 默认审批类型ID
const nextApproverId = ref(null); // 默认下一个审批人ID
function openMoveDialog(form) {
    console.log(form)
    approvalTypeId.value = form.approvalTypeId;
    moveForm.value = form
    moveTarget.value = ''
    moveDialogVisible.value = true
}

function confirmMove() {
    moveDialogVisible.value = false
    // 这里只做关闭弹窗，实际业务可自行扩展
    //id:类别的id，nextId:下一个审批人的id
    changeDefaultApprover({id:approvalTypeId.value,nextId:nextApproverId.value}).then(response => {
        console.log(response) 
    })
}
</script>

<style scoped>
.approver-container {
    padding: 20px;
    background-color: #f7f8fa;
    border-radius: 8px;
    max-width: 240px;
}

.approver-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.approver-list li {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    transition: background-color 0.3s;
}

.approver-list li:hover {
    background-color: #e6f0fa;
}

.approver-list li.selected {
    background-color: #409eff;
    color: #fff;
    font-weight: 500;
}



.approval-page {
    display: flex;
    background: #f7f8fa;
    min-height: 100vh;
    padding: 24px;
    box-sizing: border-box;
}

.approval-sidebar {
    width: 200px;
    background: #fff;
    border-radius: 10px;
    margin-right: 24px;
    padding: 24px 0 0 0;
    box-shadow: 0 2px 8px #f0f1f2;
}

.sidebar-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 16px;
    padding-left: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plus-icon {
    font-size: 18px;
    color: #409eff;
    cursor: pointer;
}

.sidebar-menu {
    border: none;
    background: transparent;
}

.approval-main {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 32px 32px 24px 32px;
    box-shadow: 0 2px 8px #f0f1f2;
    min-width: 0;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.main-title {
    font-size: 20px;
    font-weight: 700;
}

.form-table {
    background: #fff;
}

.form-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.form-info-text {
    display: flex;
    flex-direction: column;
}

.form-name {
    font-weight: 600;
    font-size: 16px;
}

.form-desc {
    color: #888;
    font-size: 13px;
}

.ml-2 {
    margin-left: 12px;
}

.move-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

@media (max-width: 900px) {
    .approval-page {
        flex-direction: column;
        padding: 8px;
    }

    .approval-sidebar {
        width: 100%;
        margin-right: 0;
        margin-bottom: 16px;
    }

    .approval-main {
        padding: 16px 4px;
    }
}
</style>